<script setup>
import { reactive, ref, watch, watchEffect } from 'vue'
import FlashSaleProductDialog from '@/pages/FlashSale/components/FlashSaleProductDialog.vue'
import { deleteSeckillProduct, getSeckillProductList } from '@/service/seckill.js'
import { displayLoading } from '@/utils/loading.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { queryProductEcho } from '@/service/product.js'
const total = ref(0)
const searchForm = reactive({
  productName: '',
  currentPage: 1,
  pageSize: 10,
})
watch(
  searchForm,
  () => {
    loadData()
  },
  { immediate: true }
)
function clearQueryParam() {
  if (searchForm.productName === '' && searchForm.currentPage === 1 && searchForm.pageSize === 10) {
    loadData()
  } else {
    Object.assign(searchForm, {
      productName: '',
      currentPage: 1,
      pageSize: 10,
    })
  }
}
const seckillProductList = ref([])
const type = ref('add')
const seckillProductDialogRef = ref()
function addNewSeckillProduct() {
  type.value = 'add'
  seckillProductDialogRef.value.showModal = true
}
async function loadData() {
  const res = await displayLoading(() =>
    getSeckillProductList(searchForm.productName, searchForm.currentPage, searchForm.pageSize)
  )
  total.value = res.data.total
  seckillProductList.value = res.data.records
}
async function onTapEditSeckillProductButton(row) {
  type.value = 'edit'
  const { data: productInfo } = await queryProductEcho(row.productId)
  console.log(row)
  seckillProductDialogRef.value.seckillProductForm.seckillTime = [
    new Date(row.seckillStartTime),
    new Date(row.seckillEndTime),
  ]
  seckillProductDialogRef.value.seckillProductForm.status = row.status
  seckillProductDialogRef.value.seckillProductForm.seckillProduct = productInfo
  seckillProductDialogRef.value.showModal = true
}
function onTapDeleteSeckillProductButton(row) {
  ElMessageBox.confirm(`确定删除秒杀商品：<span style="color: red">${row.productName}</span>?`, '信息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    dangerouslyUseHTMLString: true, // 允许内容使用 HTML 字符串
  })
    .then(async () => {
      await deleteSeckillProduct(row.productId)
      await loadData()
      ElMessage({
        type: 'success',
        message: '成功删除秒杀商品！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
</script>

<template>
  <div class="flash-sale-product-list">
    <el-form :model="searchForm" inline label-position="right" label-width="auto">
      <el-form-item label="商品名称:" style="width: 100%">
        <div style="display: flex; align-items: center; width: 100%">
          <el-input v-model="searchForm.productName" placeholder="请输入商品名称" style="width: 300px"></el-input>
          <el-button style="margin-left: 10px" type="info" @click="clearQueryParam">清空查询</el-button>
          <el-button style="margin-left: auto" type="primary" @click="addNewSeckillProduct">新增秒杀商品</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-table :data="seckillProductList" :header-cell-style="{ background: '#eef1f6', color: '#606266' }" border>
      <el-table-column header-align="center" label="商品信息" width="300px">
        <template #default="scope">
          <div class="product-info">
            <img :src="scope.row.productImageUrl" alt="" />
            <div class="product-name">
              {{ scope.row.productName }}
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="商品价格" width="120">
        <template #default="scope">
          <span v-if="scope.row.minProductPrice !== scope.row.maxProductPrice" style="font-size: 12px">
            ￥{{ scope.row.minProductPrice }}~￥{{ scope.row.maxProductPrice }}
          </span>
          <span v-else style="font-size: 12px"> ￥{{ scope.row.minProductPrice }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="秒杀价格" width="120">
        <template #default="scope">
          <span v-if="scope.row.minSeckillPrice !== scope.row.maxSeckillPrice" style="font-size: 12px">
            ￥{{ scope.row.minSeckillPrice }}~￥{{ scope.row.maxSeckillPrice }}
          </span>
          <span v-else style="font-size: 12px"> ￥{{ scope.row.minSeckillPrice }} </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="库存信息" width="120">
        <template #default="scope">
          <div class="product-stock">
            <div class="available-stock">可用库存:{{ scope.row.availableStock }}</div>
            <div class="total-stock">总库存:{{ scope.row.stock }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="商品状态" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="primary">已启用</el-tag>
          <el-tag v-else type="danger">已禁用</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="秒杀开始时间" width="140">
        <template #default="scope">
          <span style="font-size: 12px">
            {{ scope.row.seckillStartTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="秒杀结束时间" width="140">
        <template #default="scope">
          <span style="font-size: 12px">
            {{ scope.row.seckillEndTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" min-width="220">
        <template #default="scope">
          <el-button type="primary" @click="onTapEditSeckillProductButton(scope.row)">编辑商品</el-button>
          <el-button type="danger" @click="onTapDeleteSeckillProductButton(scope.row)">删除商品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="searchForm.currentPage"
      v-model:page-size="searchForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top: 20px"
    />
  </div>
  <flash-sale-product-dialog ref="seckillProductDialogRef" :type="type" @update="loadData"></flash-sale-product-dialog>
</template>

<style lang="scss" scoped>
.product-info {
  display: flex;
  align-items: center;
  img {
    width: 60px;
    height: 60px;
  }
  .product-name {
    font-size: 12px;
  }
}
.product-stock {
  font-size: 12px;
  display: flex;
  flex-direction: column;
}
</style>
